<script setup lang="ts">
import { ref, onMounted, computed } from 'vue';
import axios from 'axios';
import {ElTable, ElTableColumn, ElTag, ElLoading, ElIcon, ElMessage} from 'element-plus';
import {ArrowLeft} from "@element-plus/icons-vue";

// 1. 定义变量（解决警告）
const products = ref<any[]>([]); // 存储商品数据
const loading = ref(false);     // 加载状态

// 2. 获取用户ID（从localStorage取，兜底为1）
const userId = computed(() => localStorage.getItem('userId') || '1');

// 3. 状态类型映射（解决警告）
const getStatusType = (status: string) => {
  switch (status) {
    case 'pending': return 'warning';
    case 'sold': return 'success';
    case 'closed': return 'danger';
    default: return 'info';
  }
};

onMounted(async () => {
  loading.value = true;
  try {
    const res = await axios.get(`/api/products/myPosted?userId=${userId.value}`);
    products.value = res.data;
  } catch (error) {
    console.error('请求失败:', error);

  } finally {
    loading.value = false;
  }
});
</script>


<template>
  <div class="my-posted">
    <router-link to="/personal/" class="back-btn">
      <el-icon><ArrowLeft /></el-icon>
    </router-link>
    <h2>我发布的商品</h2>
    <!-- 表格渲染，绑定 loading 和 products -->
    <el-table
        :data="products"
        border
        style="width: 100%"
        v-loading="loading"
    >
      <el-table-column prop="id" label="商品ID" align="center" />
      <el-table-column prop="title" label="标题" align="center" />
      <el-table-column prop="price" label="价格" align="center" />
      <el-table-column label="状态" align="center">
        <template #default="scope">
          <el-tag :type="getStatusType(scope.row.status)">
            {{ scope.row.status }}
          </el-tag>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<style scoped>
.my-posted {
  padding: 20px;
}
</style>